<template>
    <div class="qtn flex font">
        <AsideVue></AsideVue>
        <div class="box" :class="{ 'w87': !store.state }">
            <NavVue></NavVue>
            <div class="flex mt-10">
                <!-- 左边 -->
                <div class="left ml-10 mr-10">
                    <div class="leftTab bs">
                        <p class="ml-10 title fwb f18">QTN LIST</p>
                        <el-table :data="leftTableData" v-el-table-infinite-scroll="load" @cell-click="table"
                            height="59vh" style="width: 100%" :row-class-name="rfqList">
                            <el-table-column prop="inquiry_id" align="center" label="RFQ ID" width="140" />
                            <el-table-column prop="country.name" align="center" label="CNTY" />
                            <el-table-column prop="items_count" align="center" label="ITEMS" />
                            <el-table-column prop="customer.Customer_type" align="center" label="SUPPLIER" width="100" />
                            <el-table-column prop="state" align="center" label="STA" />
                        </el-table>
                    </div>
                    <div ref="main" class="w100p bs mt-10 main" style="height: 28vh"></div>
                </div>
                <!-- 中间 -->
                <div class="center">
                    <!-- 中间部分 -->
                    <CentreTableVue ref="centre" @product="product" @save="save" :rfqId="rfqId" :newLeading="newLeading"
                        :newCondition="newCondition"></CentreTableVue>

                    <!-- 下部分 -->
                    <HistoricalQuoteVue :product_id="product_id" :tableData="tableData" :newLeading="newLeading">
                    </HistoricalQuoteVue>
                </div>
                <!-- 右边 -->
                <div class="right ml-10"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as $axios from '../../api/index'
import * as echarts from "echarts";
// import westeros from 'echarts/theme/westeros'
import AsideVue from '../components/Aside.vue';
import NavVue from '../components/Nav.vue';
import CentreTableVue from './components/CentreTable.vue';
import HistoricalQuoteVue from './components/HistoricalQuote.vue';
import { useDemoStore } from '../../pinia/index'
const store = useDemoStore()

// 左边表格数据
const leftTableData = ref([])
const data = {
    token: store.token,
    page: 0, //页数
    limit: 25 //显示条数
}
const getLeftTableData = () => {
    $axios.$Inside_polling(data).then(res => {
        leftTableData.value = [
            ...leftTableData.value,
            ...res.data.data
        ]
        rfqId.value = rfqId.value || leftTableData.value[0].inquiry_id
        // console.log(res.data)
    })
}

// 上拉加载更多
const load = () => {
    data.page++
    getLeftTableData()
    // console.log(data.page)
}

// 子组件触发，更新页面
const save = ()=>{
    const data = {
    token: store.token,
    page: 0, //页数
    limit: 25 //显示条数
}
    $axios.$Inside_polling(data).then(res => {
        leftTableData.value = res.data.data
        rfqId.value = res.data.data[0].inquiry_id
    })
}

// 点击表格触发事件
const rfqId = ref('')
const table = (row) => {
    rfqId.value = row.inquiry_id
    // console.log(row)
}
// 表格高亮
const rfqList = ({
    row,
    rowIndex,
}) => {
    if (row.inquiry_id === rfqId.value) {
        return 'success-row'
    }
    return ''
}


// 折线图数据
const history_quotation = ref([])
const getHistory_quotation = () => {
    const data = {
        token: store.token,
        product_id: product_id.value
    }
    $axios.$history_quotation(data).then(res => {
        history_quotation.value = res.data
        init()
        // console.log(res.data)
    })
}

// 子组件触发的事件
const product_id = ref('')
const product = () => {
    product_id.value = centre.value.product_id
    getHistory_quotation()
    // console.log(centre.value.product_id)
}

// 接收子组件的数据
const centre = ref()


// Leading
const newLeading = [
    {
        case: "一周有效",
        label: "+1 week"
    },
    {
        case: "三个月有效",
        label: "+3 mouth"
    },
    {
        case: "今天有效",
        label: "+1 day"
    },
    {
        case: "三天有效",
        label: "+3 day"
    },
    {
        case: "五天有效",
        label: "+5 day"
    },
    {
        case: "一个月有效",
        label: "+1 mouth"
    },
    {
        case: "半年有效",
        label: "+6 mouth"
    },
]

// Condition(状态)
const newCondition = [
    {
        case: "QB全新保内",
        label: "New Sealed Under Guarantee"
    },
    {
        case: "QG全新过保",
        label: "New Sealed Beyond Guarantee"
    },
    {
        case: "QK全新开封保内",
        label: "New Unsealed Under Guarantee"
    },
    {
        case: "QKG全新开封过保",
        label: "New Unsealed Beyond Guarantee"
    },
    {
        case: "F翻新",
        label: "Refurbish"
    },
    {
        case: "E二手",
        label: "Used"
    },
    {
        case: "J兼容",
        label: "Substitute"
    },
    {
        case: "G高仿无牌",
        label: "High Copy Blank Brand"
    },
    {
        case: "GD高仿带牌",
        label: "High Copy With Brand"
    },
    {
        case: "S升级",
        label: "Upgrade"
    },
    {
        case: "W无货",
        label: "Discontinued"
    }
]


// 图表数据
const main = ref()
const init = () => {
    var myChart = echarts.init(main.value, 'westeros');
    var option;

    option = {
        title: {
            text: centre.value.model
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['Email']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: 'Email',
                type: 'line',
                stack: 'Total',
                data: history_quotation.value
            }
        ]
    };
    option && myChart.setOption(option);
    window.addEventListener("resize", myChart.resize) //自动缩放
}

</script>

<style>
.success-row {
    --el-table-tr-bg-color: #eef1f4;
}
</style>

<style lang="less" scoped>
@import './qtn.less';
</style>